<template>
  <div class="chat-visitor">
    <template v-if="visitorList.length > 0">
      <cell-group :border-top="false">
        <cell
          v-for="item in visitorList" 
          :key="item.customer_id"
          :title="item.user_name"
          :label="(item.message_list[0] || item.message) | messageNew"
          :date="item.add_time"
          :image="item.avatar"
          :id="item.customer_id"
          :number="item.num"
          buttonName="接入"
          :buttonRoute="{
              path:'/chat/message',
              query:{
                id: item.customer_id,
                sid: item.store_id,
                goods_id: item.goods_id
              }
          }">
        </cell>
      </cell-group>
    </template>
    <template v-else>
      <no-info></no-info>
    </template>
  </div>
</template>

<script>
import {
  mapState,
  mapActions
} from 'vuex';

// custom components
import CellGroup from '@/components/CellGroup';
import Cell from '@/components/Cell';
import NoInfo from '@/components/NoInfo';

export default {
  name: 'chat-dialogue',
  data() {
    return {
    };
  },
  components: {
    CellGroup,
    Cell,
    NoInfo
  },
  created () {
    this.getVisitorList();
  },
  computed: {
    ...mapState('chat/visitor', [
      'visitorList'
    ])
  },
  methods: {
    ...mapActions('chat/bottomNavigator', [
      'activateChatFooterName',
      'showBottomNav'
    ]),
    ...mapActions('chat/messageBottomInput', [
      'showMessageInput'
    ]),
    ...mapActions('chat/visitor', [
      'getVisitorList'
    ])
  },
  activated() {
    this.activateChatFooterName('visitor');
    this.showMessageInput(false);
    this.showBottomNav(true);
  }
};
</script>


<style lang="scss">

</style>
